<template>
  <view style="padding-bottom: 180rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-if="tabIndex == 0">
      <u-cell-group>
        <u-cell-item title="验收效果图" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <image-upload @change="onImageChange" v-model="imageList"></image-upload>
        </u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <file-picker @change="onFileChange" v-model="fileList"></file-picker>
        </u-cell-item>

        <u-cell-item title="验收备注" :arrow="false">
          <u-input disabled type="textarea" v-model="state.AA_Remark" inputAlign="right"></u-input>
        </u-cell-item>
      </u-cell-group>

      <block>
        <u-gap height="40" bg-color="#f5f5f5"></u-gap>
        <review-form ref="reviewForm"></review-form>
      </block>
    </view>

    <view v-if="tabIndex == 1" class="">
      <u-cell-group>
        <u-cell-item title="一级经销商名称" :arrow="false">{{ First_Dealer_BaseInfo.Name }}</u-cell-item>
        <u-cell-item title="二级经销商名称" :arrow="false">{{ Double_Dealer_BaseInfo.Name }}</u-cell-item>
        <u-cell-item title="门店代码" :arrow="false">{{ Door_Dealer_BaseInfo.Account }}</u-cell-item>
        <u-cell-item title="门店名称" :arrow="false">{{ Door_Dealer_BaseInfo.Name }}</u-cell-item>
        <u-cell-item title="门店主管" :arrow="false">{{ Door_Dealer_BaseInfo.NickName }}</u-cell-item>
        <u-cell-item title="门店主管手机号" :arrow="false">{{ Door_Dealer_BaseInfo.Mobile }}</u-cell-item>
        <u-cell-item title="门店地址" :arrow="false">
          <city-select disabled v-model="areaCode"></city-select>
          <text>{{ Door_Dealer_BaseInfo.Address }}</text>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view v-if="tabIndex == 2">
      <u-cell-group>
        <u-cell-item title="计划开业时间" required :arrow="false">
          <u-input
            type="select"
            @click="showTimePicker = true"
            :value="plannedTime"
            inputAlign="right"
            :select-open="showTimePicker"
          />
          <u-picker mode="time" v-model="showTimePicker" @confirm="onTimeChange"></u-picker>
        </u-cell-item>

        <u-cell-item title="预装板块" required :arrow="false">
          <u-checkbox-group @change="onPreInstalledPlatesChange" disabled>
            <u-checkbox
              v-model="item.checked"
              v-for="(item, index) in Pre_Installed_Plates"
              :key="index"
              :name="item.Key"
            >
              {{ item.Value }}
            </u-checkbox>
          </u-checkbox-group>
        </u-cell-item>

        <u-cell-item title="是否需要储物间" required :arrow="false">
          <u-radio-group v-model="form.IsNeedStorage" disabled>
            <u-radio name="1">是</u-radio>
            <u-radio name="2">否</u-radio>
          </u-radio-group>
        </u-cell-item>

        <u-cell-item title="是否通燃气" required :arrow="false">
          <u-radio-group v-model="form.IsPassGas" disabled>
            <u-radio name="1">是</u-radio>
            <u-radio name="2">否</u-radio>
          </u-radio-group>
        </u-cell-item>

        <u-cell-item title="是否满足上下水" required :arrow="false">
          <u-radio-group v-model="form.IsUpDownWater" disabled>
            <u-radio name="1">是</u-radio>
            <u-radio name="2">否</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="是否有柱子" required :arrow="false">
          <u-radio-group v-model="form.IsPillar" disabled>
            <u-radio name="1">是</u-radio>
            <u-radio name="2">否</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="" :arrow="false" v-if="form.IsPillar == 1">
          <new-store-photo
            :readonly="true"
            :minUpCount="0"
            v-model="form.Pillar_Photo_List"
            defaultTitle="柱子照片"
            :showDelete="false"
            :showAdd="false"
          ></new-store-photo>
        </u-cell-item>

        <u-cell-item title="是否有消防栓" required :arrow="false" :border-bottom="false">
          <u-radio-group v-model="form.IsFireHydrant" disabled>
            <u-radio name="1">是</u-radio>
            <u-radio name="2">否</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="" :arrow="false" v-if="form.IsFireHydrant == 1">
          <new-store-photo
            :readonly="true"
            :minUpCount="0"
            v-model="form.FireHydrant_Photo_List"
            defaultTitle="消防栓照片"
            :showAdd="false"
            :showDelete="false"
          ></new-store-photo>
        </u-cell-item>

        <u-cell-item title="门店现场照片" required :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="" :arrow="false">
          <new-store-photo
            :readonly="true"
            :minUpCount="3"
            v-model="form.Store_Photo_List"
            defaultTitle="店内现场照片"
            :showAdd="false"
            :showDelete="false"
          ></new-store-photo>
        </u-cell-item>

        <u-cell-item title="门店CAD图纸" required :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="" :arrow="false">
          <file-picker :readonly="true" v-model="form.CAD_Photo_List"></file-picker>
        </u-cell-item>

        <u-cell-item title="备注" :arrow="false">
          <u-input disabled v-model="form.ApplyRemark" type="textarea" inputAlign="right" placeholder="备注"></u-input>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="" v-show="tabIndex == 3">
      <u-cell-group>
        <u-cell-item title="验收效果图" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <image-upload @change="onImageChange" v-model="imageList"></image-upload>
        </u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <file-picker @change="onFileChange" v-model="fileList"></file-picker>
        </u-cell-item>

        <u-cell-item title="备注" :arrow="false">
          <u-input type="textarea" v-model="form.ApplicationRemake" inputAlign="right"></u-input>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="btn-group-fixed">
      <u-button type="warning" @tap="submit">保存提交</u-button>
      <u-button class="u-m-t-20" @tap="backToList">返回列表</u-button>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '旗舰店设计验收审核',
      tabList: [{ name: '协议上传' }, { name: '门店信息' }, { name: '门头设计信息' }],
      tabIndex: 0,

      loadCity: false,

      imageList: [],
      fileList: [],

      areaCode: [],

      showTimePicker: false,

      plannedTime: '',

      Pre_Installed_Plates: [],

      state: '',

      showReview: false,

      First_Dealer_BaseInfo: {},
      Double_Dealer_BaseInfo: {},
      Door_Dealer_BaseInfo: {},

      form: {
        CAD_Photo_List: [],
        Store_Photo_List: [],
        Pillar_Photo_List: [],
        FireHydrant_Photo_List: [],
        Pre_Installed_Plates_List: [],
        RealList: [],
        UrlList: [],
        Id: '',
        DealerId: '',
        ObjectType: '',
        PlannedOpeningTime: '',
        IsNeedStorage: '',
        IsPassGas: '',
        IsUpDownWater: '',
        IsPillar: '',
        IsFireHydrant: '',
        ApplyRemark: '',

        AuditState: '',
        AuditRemark: ''
      },

      reviewForm: {
        AgreementAcceptanceId: '',
        DealerId: '',
        Type: 3,
        ObjectId: '',
        AgreementPhotoList: [],
        AuditRemark: '',
        State: ''
      }
    };
  },

  onLoad(options) {
    if (options.Id) {
      this.reviewForm.AgreementAcceptanceId = options.Id;
    }
    if (options.DealerId) {
      this.reviewForm.DealerId = options.DealerId;
    }

    if (options.ApplyForType == 6) {
      this.reviewForm.Type = options.ApplyForType;
      this.title = '旗舰店设计验收审核';
    }
    if (options.ApplyForType == 7) {
      this.reviewForm.Type = options.ApplyForType;
      this.title = '非旗舰店设计验收审核';
    }

    this.init();
  },

  methods: {
    backToList() {
      uni.navigateBack();
    },

    onImageChange(list) {
      const initialPhotoList = [];
      if (this.fileList.length > 0) {
        initialPhotoList.push(...this.imageList);
      }
      initialPhotoList.push(...list);
      this.reviewForm.AgreementPhotoList = initialPhotoList;
    },

    onFileChange(list) {
      const initialPhotoList = [];
      if (this.imageList.length > 0) {
        initialPhotoList.push(...this.fileList);
      }
      initialPhotoList.push(...list);
      this.reviewForm.AgreementPhotoList = initialPhotoList;
    },

    init() {
      this.$u.api
        .getFlagshipStoreDesignDetail({
          AA_Id: this.reviewForm.AgreementAcceptanceId,
          ObjectType: this.reviewForm.Type,
          DealerId: this.reviewForm.DealerId,
          SDA_Id: 0
        })
        .then(res => {
          if (res.ResultCode == 1) {
            this.state = res;

            if (res.CheckList) {
              this.imageList = res.CheckList;
              this.reviewForm.AgreementPhotoList = res.CheckList;
              // this.fileList = res.RealList.filter(item => item.TypeId == 4);
            }

            if (res.SDA_Detail) {
              this.form.ApplyRemark = res.SDA_Detail.ApplicationRemake;

              const {
                IsNeedStorage,
                IsPassGas,
                IsUpDownWater,
                IsPillar,
                IsFireHydrant,
                PlannedOpeningTime
              } = res.SDA_Detail;

              this.plannedTime = this.$u.timeFormat(this.form.PlannedOpeningTime, 'yyyy-mm-dd');
              this.form.PlannedOpeningTime = PlannedOpeningTime;

              this.form.IsNeedStorage = IsNeedStorage;
              this.form.IsPassGas = IsPassGas;
              this.form.IsUpDownWater = IsUpDownWater;
              this.form.IsPillar = IsPillar;
              this.form.IsFireHydrant = IsFireHydrant;
            }

            const { Pillar_Photo, CAD_Photo, Store_Photo, FireHydrant_Photo } = res;
            if (Pillar_Photo) {
              this.form.Pillar_Photo_List = Pillar_Photo;
            }

            if (CAD_Photo) {
              this.form.CAD_Photo_List = CAD_Photo;
            }

            if (Store_Photo) {
              this.form.Store_Photo_List = Store_Photo;
            }

            if (FireHydrant_Photo) {
              this.form.FireHydrant_Photo_List = FireHydrant_Photo;
            }

            if (res.Pre_Installed_Plates) {
              this.Pre_Installed_Plates = res.Pre_Installed_Plates;
              this.Pre_Installed_Plates.forEach(item => {
                item.checked = item.IsShow == 1;
              });

              this.form.Pre_Installed_Plates_List = res.Pre_Installed_Plates;
            }

            if (res.First_Dealer_BaseInfo) {
              this.First_Dealer_BaseInfo = res.First_Dealer_BaseInfo;
            }

            if (res.Double_Dealer_BaseInfo) {
              this.Double_Dealer_BaseInfo = res.Double_Dealer_BaseInfo;
            }

            if (res.Door_Dealer_BaseInfo) {
              this.Door_Dealer_BaseInfo = res.Door_Dealer_BaseInfo;
            }

            this.areaCode = [
              res.Door_Dealer_BaseInfo.ProvinceId,
              res.Door_Dealer_BaseInfo.CityId,
              res.Door_Dealer_BaseInfo.DistrictId
            ];

            this.loadCity = true;
          }
        });
    },

    submit() {
      this.reviewForm.State = this.$refs.reviewForm.form.State;
      this.reviewForm.AuditRemark = this.$refs.reviewForm.form.AuditRemark;

      if (!this.reviewForm.State) {
        this.$u.toast('请选择审核状态');
        return false;
      }

      console.log(this.reviewForm);

      this.$u.api.approvalAgreement(this.reviewForm).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$refs.uToast.show({
            title: ResultMessage,
            back: true
          });
        }
      });
    },

    onCityChange(e) {
      if (e.province) {
        this.form.Store_ProvinceId = e.province.value;
      }
      if (e.city) {
        this.form.Store_CityId = e.city.value;
      }
      if (e.area) {
        this.form.Store_DistrictId = e.area.value;
      }
    },

    onTimeChange(e) {
      this.plannedTime = `${e.year}-${e.month}-${e.day}`;
      this.form.PlannedOpeningTime = e.timestamp;
    },

    onPreInstalledPlatesChange(e) {
      this.form.Pre_Installed_Plates_List = this.Pre_Installed_Plates.filter(item => e.includes(item.Key)).map(item => {
        return {
          Key: item.Key,
          Value: item.Value,
          IsShow: 1
        };
      });
    }
  }
};
</script>

<style lang="scss"></style>
